import React from "react";
import { View, Pressable, StyleSheet, Text } from "react-native";

export default () => {

    return (
        <View style={style.root}>
            {/* 强大的Pressable，支持状态 */}
            <Pressable style = {(state) => {
                const { pressed } = state;
                return [style.button,pressed && style.pressed];
            }}>
                {(state) => {
                    const { pressed } = state;
                    return (
                        <Text style={pressed ? style.txtPressed : style.txt}>登 陆</Text>
                    );
                }}
            </Pressable>
        </View>
    );
}

const style = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        flexDirection:'column',
        alignItems:'center'
    },
    txt: {
        color: 'black',
    },
    txtPressed: {
        color: '#e3e3e3',
    },
    button:{
        width: 300,
        height: 65,
        backgroundColor:'#e3eee3',
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center'
    },
    pressed:{
        backgroundColor:'blue',
        color:'white'
    }


});

